<template>
	<view :data="cdata">
		<view>
			<video class="player-video" :src="cdata.videoUrl"></video>
		</view>
		<view class="content-view" >
				<view class="cover-view">
					<image class="cover-img" :src="cdata.pic">
				</view>
				<view class="intro-view" style="margin-left: 20rpx;">
					<view> <text style="font-size: 56rpx;">阿凡达</text></view>
					<view> <text>162分钟 / 动作 / 科幻/ 美国</text></view>
					<view> <text>评分 9.3</text></view>
				</view>
	
		</view>
		<view style="width: 100%;height: 10rpx;background-color: #dbdbdb;"></view>
		<view style="background-color: #ffffff;">
			<view class="inv-h-w" style="border-bottom: 1px solid #e8e8e8;">
					<view :class="['inv-h',Inv==0?'inv-h-se':'']" @click="Inv=0">简介</view>
					<view :class="['inv-h',Inv==1?'inv-h-se':'']" @click="Inv=1">影评</view>
			</view>
			<view style="padding: 10rpx;" v-show="Inv == 0">
					该片主要讲述人类穿上阿凡达的躯壳，飞到遥远的星球潘多拉开采资源。受伤后以轮椅代步的前海军杰克自愿接受实验并以他的阿凡达来到潘多拉。结识了当地纳美族人公主涅提妮之后，杰克在一场人类与潘多拉军民的战争中陷入两难。
			</view>
			<view style="padding: 10rpx;" v-show="Inv == 1">
					真是一部倍感震撼的大片，当年想看，但是真的一票难求，票价炒到了几百，今天终于得偿所愿，进影院看，绝对超值！
					简单的理解为动迁组与动迁户之战未免太过狭隘，人类已经把地球破坏得满目疮痍，应该开始去弥补所造成的过失，难不成寻找新的星球再生事端？
					为了自由和信仰而战，不是靠侵略和毁灭去创造，要用友爱与包容去融合，才能各取所需，和谐共赢，共创人类命运共同体！
			</view>
		</view>
		<view style="width: 100%;height: 10rpx;background-color: #dbdbdb;"></view>
		<view style="width: 94%;padding: 1% 3%;background-color: #ffffff;">
			<button type="primary">立即购买</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cid:"",
				cdata:"",
				Inv:0	//切换选项卡
			}
		},
		onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
			uni.getSystemInfo({
				success(res) {
					console.log(res.windowHeight);
					
				}
			})
		
		
			this.cid = option.id; //打印出上个页面传递的参数。
			//页面滚动到底部触发
			uni.showLoading({title:"加载中...",})
			
			uni.request({
				url: 'http://127.0.0.1:1060/course/'+this.cid,
				method: 'GET',
				success: res => {
					//拼接数据
					this.cdata = res.data;
					
				},
				fail: function(e) {
					uni.showToast({
						title:"唉哟，程序错误了["+JSON.stringify(e)+"]",
						icon:"loading"
					})
				},
				complete() {
					//关闭进度条
					setTimeout(function () {
					    uni.hideLoading();
					}, 500);
				}
			});
		},
		methods: {
			changeTab(Inv){
				that.navIdx = Inv;
			}
		}
	}
</script>

<style scoped>
	.player-video{
		width: 100%;
	}
	
	.content-view{
		width: 90%;
		height: 200rpx;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		background-color: #ffffff;
		padding: 5%;
	}
	.cover-view{
		float: left;
		width: 30%;
		height: 100%;
	}
	.cover-img{
		width: 100%;
		border-radius: 10rpx;
		height: 100%;
	}
	
	.intro-view{
		width: 60%;
		float: left;
		height: 200rpx;
	}
	.intro-view text{
		font-size: 30rpx;
	}
	
	.inv-h-w{
		background-color: #FFFFFF;
		height: 100upx;
		display: flex;
	}
	.inv-h{font-size: 30upx;flex: 1;text-align: center;color: #C9C9C9;height: 100upx;line-height: 100upx;}
	.inv-h-se{color: #5BA7FF;border-bottom: 4upx solid #5BA7FF;}
	page{background-color: #F2F2F2;}
</style>
